<template>
	<view>
		<u-popup :show="show" mode="center" @close="close" round="30rpx" :closeable="true" bgColor="transparent">
			<view class="chestPop">
				<view class="kqchi">开启宝箱</view>
				<u-form labelWidth="200rpx" :labelStyle="{ color: '#FFFFFF', fontSize: '30rpx',opacity:'0.6' }"
					labelPosition="top" :model="userInfo" :rules="rules" ref="uForm">
					<u-form-item label="开启数量" prop="number" ref="item1">
						<view class="ipt">
							<u-input fontSize="32rpx" color="#FFFFFF" placeholderClass="placeholderClass"
								placeholder="请输入数量" border="none" v-model="userInfo.number"></u-input>
						</view>
					</u-form-item>
		
				</u-form>
				<view style="margin-top: 30rpx;">
					<u-button :custom-style="customStyleBtn1" @click="submit" :loading="loading">
						确认
					</u-button>
				</view>
			</view>
			<unboxing :show="unboxingShow" :boxlist="boxlist" @success="unboxingShow = false"/>
		</u-popup>
		
	</view>
	
</template>

<script>
	import unboxing from './unboxing.vue'
	import {
		openBox
	} from '@/api/my.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: true
			},
			itemBox: {
				type: Object,
				default: {}
			}
		},
		components: {
			unboxing
		},
		data() {
			return {
				unboxingShow:false,
				loading: false,
				customStyleBtn1: {
					width: '600rpx',
					height: '96rpx',
					borderRadius: '30rpx',
					background: 'linear-gradient(to right, #704BF7, #0CECA6)',
					fontSize: '33rpx',
					fontWeight: 800,
					color: '#FFFFFF',
					border: 'none',
					lineHight: '50rpx !important',
					letterSpacing: '1px',
					isEye: false
				},
				userInfo: {
					number: ''
				},
				rules: {
					number: [{
						required: true,
						message: '请输入数量',
						trigger: ['blur', 'change']
					}],
				},
				boxlist:[]
			}
		},
		methods: {
			// 开启宝箱
			async submit() {
				try {
					let res = await openBox(this.userInfo)
					this.unboxingShow = true
					this.boxlist = res.data
					this.$emit('getBox')
				} catch (error) {
					//TODO handle the exception
				}
			},
			close() {
				this.$emit('success')
				this.userInfo = {

				}
			}
		}
	}
</script>

<style scoped>
	.kqchi {
		color: #FFFFFF;
		font-size: 38rpx;
		font-weight: 800;
	}

	.placeholderClass {
		font-size: 32rpx;
		opacity: 0.8;
	}

	.ipt {
		width: 600rpx;
		height: 100rpx;
		border-radius: 30rpx;
		background-color: #22304D;
		border: 4rpx solid #313F5A;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.chestPop {
		width: 650rpx;
		min-height: 450rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 25rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #1C2739;
		border-radius: 30rpx;
		border: 4rpx solid #283348;
	}
</style>